<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">

<!--选择模态框-->
<div class="modal fade" id="modal-select">
    <div class="modal-dialog" style="width: 1350px;">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom: 0px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">铝料在库信息</h4>
            </div>
            <div class="modal-body" style="padding-bottom: 5px;padding-top: 0px;">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <form id="queryForm" onkeydown="onKeyDown()">
                                <div class="box-header" style="padding-bottom: 0px;">
                                    <div class="row" id="HiddenDiv">
                                        <div class="form-inline">
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>
                                                    物料分类
                                                </label>
                                                <select id="ityMatTypeQuery" name="ityMatTypeQuery"
                                                        class="form-control">
                                                    <!--<option value="1">外购件</option>-->
                                                    <option value="4">铝料</option>
                                                </select>
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>项目编号</label>
                                                <input type="text" id="ityProCodeQuery" name="ityProCodeQuery"
                                                       class="form-control"
                                                       placeholder="请输入项目编号">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>项目信息</label>
                                                <input type="text" id="ityProNameQuery" name="ityProNameQuery"
                                                       class="form-control" placeholder="请输入项目名称或部分名称">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>合同编号</label>
                                                <input type="text" id="contractNo" name="contractNo"
                                                       class="form-control" placeholder="请输入合同编号">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>供应商</label>
                                                <input type="text" id="odaSupplier" name="odaSupplier"
                                                       class="form-control" placeholder="请输入供应商">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>
                                                    类型
                                                </label>
                                                <input type="text" id="ityMatNameQuery" name="ityMatNameQuery"
                                                       class="form-control" style="width: 100px;" placeholder="请输入类型">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>模具号</label>
                                                <input type="text" id="ityDrawingCodeQuery" name="ityDrawingCodeQuery"
                                                       class="form-control" style="width: 180px;" placeholder="请输入模具号">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>规格</label>
                                                <input type="text" id="itySpec" name="itySpec"
                                                       class="form-control" style="width: 100px;" placeholder="请输入规格">
                                            </div>
                                            <div class="form-group">
                                                <label>记账日期</label>
                                                <input type="text" class="form-control datepicker" id="startStorageDate"
                                                       name="startStorageDate" readonly="readonly"/>
                                                <span>至</span>
                                                <input type="text" class="form-control datepicker" id="endStorageDate"
                                                       name="endStorageDate" readonly="readonly"/>
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <button class="btn btn-success" type="button" id="btn_stockSearch">
                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="box-body" style="padding-top: 0px;padding-bottom: 0px;">
                                <table id="bootstrap-table"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="padding-top: 5px;">
                <button type="button" class="btn btn-info" id="btn-commit">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>

</div>


<section class="content-header">
    <h1>
        铝料出库单
    </h1>
</section>
<section class="content">

    <div id="printArea" style=" display: none;">
        <div style="padding-bottom: 10px;text-align: center;vertical-align: middle;">
            <div style="font-size: 20px;vertical-align: middle;display: inline-block;font-weight: bold;">辽宁忠旺机械设备制造有限公司出库单
            </div>
        </div>
        <table style="font-size:12px;width: 100%;line-height: 20px;">
            <tr>
                <td width="25%">单据编号：<label id="odrCodePrint" style="font-weight: normal"></label></td>
                <td width="20%">出库类型：<label id="odrOutTypePrint" style="font-weight: normal"></label></td>
                <td width="25%">出库车间：<label id="odrDeptPrint" style="font-weight: normal"></label></td>
                <td width="30%">经手人：<label id="odrCheckerPrint" style="font-weight: normal"></label></td>
            </tr>
            <tr>
                <td colspan="2">联系方式：<label id="odrServicePersonPrint" style="font-weight: normal"></label></td>
                <td>说明：<label id="odrSummaryPrint" style="font-weight: normal"></label></td>
                <td>制单人：<label id="odrTakePersonPrint" style="font-weight: normal"></label></td>
            </tr>
        </table>
        <div id="table-box">
        </div>
    </div>

    <form id="inbillForm" th:action="@{/half/halWarManage/outOfAluminWar/create}" method="post" class="form-inline"
          role="form"
          enctype="multipart/form-data">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <div class="row">
                            <div class="form-group">
                                <label>出库类型</label>
                                <select id="odrOutType" class="form-control" name="odrOutType">
                                    <option value="4">领料出库</option>
                                    <option value="7">发货出库</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label>单据编号</label>
                                <input type="text" class="form-control" name="odrCode" placeholder=""
                                       readonly="readonly"/>
                            </div>

                            <div class="form-group">
                                <label>经手人</label>
                                <input id="odrChecker" type="text" class="form-control" name="odrChecker"
                                       placeholder="">
                            </div>

                            <div class="form-group">
                                <label>联系方式</label>
                                <input id="odrServicePerson" type="text" class="form-control" name="odrServicePerson"
                                       placeholder=""
                                       autocomplete="off"/>
                            </div>

                            <div class="form-group">
                                <label>说明</label>
                                <input id="odrSummary" type="text" class="form-control" name="odrSummary" placeholder=""
                                       autocomplete="off"/>
                            </div>

                            <div class="form-group">
                                <label>出库车间</label>
                                <select id="odrDept" class="form-control select2" name="odrDept">
                                    <option value="">请选择</option>
                                    <option th:each="type:${dept}" th:value="${type.depId}"
                                            th:text="${type.depName}"></option>
                                </select>
                            </div>

                            <div class="form-group">
                                <button type="button" shiro:hasPermission="halwar:halpuroutwar:edit"
                                        class="btn btn-info pull-left" id="btn-select">
                                    选择
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div id="hot"></div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="row">
                            <div class="col-md-2">
                                <label>制单人：</label><label th:text="${userName}"></label>
                            </div>
                            <div class="col-md-6">
                                <label></label>
                            </div>
                            <div class="col-md-4">

                                <div class="col-md-2 col-md-offset-6">
                                    <!--<button type="button" class="btn btn-info file-contract btn-file">打印</button>-->
                                </div>
                                <div class="col-md-2">
                                    <button type="button" id="btn-saveInBill"
                                            class="btn btn-info file-contract btn-file"
                                            shiro:hasPermission="halwar:halaloutwar:edit">保存
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>
<div th:include="include :: footer"></div>
<script th:src="@{/js/jquery.PrintArea.js}"></script>
<script th:inline="javascript">

    var table;
    /**可编辑表单数据源*/
    var datas = [];
    /**
     * 回车检测
     * */
    function onKeyDown(event) {
        let e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 13) { // enter 键
            js.table.refresh(table);
        }
    }

    function initTable() {

        table = js.table.init({
            queryForm: "queryForm",
            url: ctx + "half/halWarManage/outOfAluminWar/list",
            scrollY: '500px',
            pageSize: 15,
            clickToSelect: true,
            showExport: false,
            columns: [
                {checkbox: true},
                {
                    title: '序号', field: 'id', width: '40',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                //{title: 'SAP物料编码', field: 'odaSapCode',width:'60'},
                {title: '类型', field: 'odaMatName'},
                {title: '材质', field: 'odaTexture'},
                {title: '规格', field: 'odaSpec'},
                {title: '模具号', field: 'odaDrawingCode'},
                {title: '数量', field: 'odaAvaNum'},
                {title: '总重量', field: 'odaWeight'},
                {title: '单价', field: 'odaPrice'},
                {title: '金额', field: 'odaAmount'},
                {title: '跟踪号', field: 'odaTrackCode'},
                {title: '项目编号', field: 'odaProCode'},
                {title: '项目名称', field: 'odaProName'},
                {title: '合同编号', field: 'contractNo'},
                {title: '供应商', field: 'odaSupplier'},
                {title: '库位', field: 'odaWhiIdName',width:'60'},
                {title: '区位', field: 'odaPosition'},
                {title: '记账日期', field: 'ityStorageDate'},
                {title: '备注', field: 'odaRemark'},
                {title: '备注', field: 'oda',visible: false}
            ]
        });
    }

    $(function () {

        //仓库数组
        var warehouseInfoArray;

        js.ajax({
            url: ctx + 'basic/half/warehouseInfo',
            type: 'post',
            traditional: true,            // 阻止深度序列化， 使参数可以使用数组
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            data: {},
            async: false,                // 异步执行
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    warehouseInfoArray = new Array();
                    for (var i = 0; i < result.data.rows.length; i++) {
                        warehouseInfoArray.push(result.data.rows[i].whiName);
                    }
                } else {
                    js.modal.warning(result.msg);
                }
            },
            error: function () {
                js.modal.fail();
            }
        });
        // 选择库存模态框
        $("#btn-select").click(function () {
            js.modal.open("modal-select")
        });
        // 选择库存模态框打开事件
        js.modal.openEvent("modal-select", function () {

            initTable();
        });
        js.modal.hideEvent("modal-select", function () {
            js.table.destroy(table);
            js.reset("queryForm");
        });

        /** 表格搜索 */
        $("#btn_stockSearch").click(function () {
            js.table.search(table);
        });

        // 选择库存模态框确定按钮点击事件
        $("#btn-commit").click(function () {

            var row = table.bootstrapTable('getSelections');
            // 如果没有选择库存，显示提示信息
            if (row.length == 0) {
                js.modal.warning("请至少选择一个物料");
                return false;
            } else {
                // 将选中的每一行数据保存到一个数组中
                // 获取整个表格数据
                for (var i = 0; i < row.length; i++) {
                    datas.push(row[i]);
                }
                var a = datas.slice(0);
                js.hot.loadData(a);
                js.modal.hide("modal-select");
            }
        });

        var process = function (data) {
            if ($.isEmptyObject(data.insertData)) {
                $.modal.warning("出库明细不允许为空！");
                return;
            }
            js.post({
                url: ctx + "half/halWarManage/outOfAluminWar/create",
                data: JSON.stringify(data),
                contentType: "application/json",
                success: function (result) {
                    if (result.type == web_status.SUCCESS) {
                        // 手动清空画面
                        datas = [];
                        js.hot.loadData(datas.slice(0));
                        $("#odrDept").val('').trigger("change");
                        $("#odrChecker").val("");
                        $("#odrServicePerson").val("");
                        $("#odrSummary").val("");
                        js.modal.confirm("单据保存成功，是否需要打印？", function () {
                            var num = result.data.id;
                            js.post({
                                url: ctx + "half/halWarManage/outOfBuyWar/printList",
                                data: {id: num},
                                contentType: "application/x-www-form-urlencoded",
                                success: function (data) {
                                    $("#odrCodePrint").text(data.data["odrCode"]);
                                    $("#odrOutTypePrint").text(data.data["odrOutType"] == 4 ? "领料出库" : "发货出库");
                                    $("#odrDeptPrint").text(data.data["odrDeptName"]);
                                    $("#odrCheckerPrint").text(data.data["odrChecker"]);
                                    $("#odrSummaryPrint").text(data.data["odrSummary"]);
                                    $("#odrTakePersonPrint").text(data.data["odrTakePerson"]);
                                    $("#odrServicePersonPrint").text(data.data["odrServicePerson"]);
                                    //$("#odrServicePersonPrint").text(data.data["odaWhiIdName"]);

                                    // 绑定打印明细数据
                                    printInBillDetail(num);
                                }
                            });
                        });
                    } else if(result.data == "保存失败"){
                        js.modal.warning(result.msg);
                    } else {
                        js.modal.warning(result.data.list);
                    }

                }
            });
        };

        // 绑定打印明细数据
        function printInBillDetail(id) {

            $("#printArea").show();
            js.post({
                url: ctx + "half/halWarManage/outOfBuyWar/printDetailList",
                data: {
                    id: id
                },
                contentType: "application/x-www-form-urlencoded",
                success: function (data) {
                    var printList = data.data;
                    // 添加dataTable表头
                    $("#table-box").empty();
                    $("#table-box").append('<table id="inBillTable"\n' +
                        '               style="font-size: 12px;text-align: center;border-right:1px solid;border-bottom:1px solid; border-collapse: collapse;"\n' +
                        '               width="100%"\n' +
                        '               cellspacing="0" cellpadding="1">\n' +
                        '        </table>');
                    $("#inBillTable").append('<THEAD style="display:table-header-group;">\n' +
                        '<TR><td style="border-left: 1px solid;border-top: 1px solid;">序号</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">类型</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">材质</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">规格</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">模具号</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">数量</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">总重量</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">跟踪号</td>' +
                        // '<td style="border-left: 1px solid;border-top: 1px solid;">订单号</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">项目编号</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">项目名称</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">合同编号</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">供应商</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">区位</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">出库日期</td>' +
                        '<td style="border-left: 1px solid;border-top: 1px solid;">备注</td></TR>\n ' +
                        '</THEAD> ');
                    $("#inBillTable").append('<tbody id="myTb"> </tbody>');
                    // 循环绑定dataTable行数据
                    var rowIndex;
                    var odaMatNamePrint;
                    var odaTexturePrint;
                    var odaSpecPrint;
                    var odaOrderNumPrint;
                    var odaWeightPrint;
                    var odaSapCodePrint;
                    var odaDrawingCodePrint;
                    var odaNumPrint;
                    var odaUnitPrint;
                    var odaTrackCodePrint;
                    var odaProCodePrint;
                    var odaProNamePrint;
                    var odaSupplierPrint;
                    var odaPartPrint;
                    var odaBrandPrint;
                    var contractNoPrint;
                    var odaCaseNoPrint;
                    var odaBoxingDatePrint;
                    var odaOutsourcedTypeNamePrint;
                    var odaWhiIdName;
                    var odaPositionPrint;
                    var odaStorageDatePrint;
                    var odaRemarkPrint;

                    var newRow;

                    for (var i = 0; i < printList.length; i++) {
                        rowIndex = printList[i]["rowIndex"];
                        odaSapCodePrint = printList[i]["odaSapCode"];
                        odaTexturePrint = printList[i]["odaTexture"];
                        odaSpecPrint = printList[i]["odaSpec"];
                        odaWeightPrint = printList[i]["odaWeight"];
                        odaOrderNumPrint = printList[i]["odaOrderNum"];
                        odaTrackCodePrint = printList[i]["odaTrackCode"] == null?"":printList[i]["odaTrackCode"];
                        odaBrandPrint = printList[i]["odaBrand"] == null?"": printList[i]["odaBrand"];
                        odaMatNamePrint = printList[i]["odaMatName"];
                        odaDrawingCodePrint = printList[i]["odaDrawingCode"] == null?"":printList[i]["odaDrawingCode"];
                        odaNumPrint = printList[i]["odaNum"];
                        odaUnitPrint = printList[i]["odaUnit"];
                        odaOutsourcedTypeNamePrint = printList[i]["odaOutsourcedType"] == 1?"成品件":"毛坯件";
                        odaProCodePrint = printList[i]["odaProCode"] == null?"": printList[i]["odaProCode"];
                        odaProNamePrint = printList[i]["odaProName"] == null?"":printList[i]["odaProName"];
                        contractNoPrint = printList[i]["contractNo"] == null?"":printList[i]["contractNo"];
                        odaSupplierPrint = printList[i]["odaSupplier"] == null?"":printList[i]["odaSupplier"];
                        odaPartPrint = printList[i]["odaPart"] == null?"": printList[i]["odaPart"];
                        odaWhiIdName = printList[i]["odaWhiIdName"];
                        odaPositionPrint = printList[i]["odaPosition"] == null ? "" :printList[i]["odaPosition"] ;
                        odaStorageDatePrint = printList[i]["odaStorageDate"];
                        odaRemarkPrint = printList[i]["odaRemark"]== null ? "" :printList[i]["odaRemark"];
                        newRow = "<tr><td style='border-left:1px solid;border-top:1px solid'>" + rowIndex + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaMatNamePrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaTexturePrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaSpecPrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaDrawingCodePrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaNumPrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaWeightPrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaTrackCodePrint + "</td>" +
                            // "<td style='border-left:1px solid;border-top:1px solid'>" + odaOrderNumPrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaProCodePrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaProNamePrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + contractNoPrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaSupplierPrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaPositionPrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaStorageDatePrint + "</td>" +
                            "<td style='border-left:1px solid;border-top:1px solid'>" + odaRemarkPrint + "</td></tr>";
                        $("#myTb").append(newRow);

                    }
                    $("#printArea").printArea();
                    $("#printArea").hide();
                }
            });
        }

        /**删除指定行*/
        var removeProcess = function (index, amount) {
            datas.splice(index, amount);
        };

        /**表单加载*/
        js.hot.init({
            element: document.getElementById('hot'),
            data: {},
            formData: ["odrOutType", "odrSummary", "odrChecker", "odrDept", "odrServicePerson"],
            colHeaders: ['ID', '库存数量', '库存ID', '仓库', '物料分类',         '比例',    '类型',   '材质','规格',      '模具号',         '数量',     '总重量',   '跟踪号',     '项目编号',    '项目名称','合同编号','供应商', '库位', '区位', '出库日期', '备注'],
            fieldName: ['odaId', 'odaNum', 'ityId', 'odaWhiIdName', 'odaMatType', 'oda','odaMatName','odaTexture','odaSpec', 'odaDrawingCode', 'odaAvaNum', 'odaWeight', 'odaTrackCode', 'odaProCode', 'odaProName','contractNo','odaSupplier','odaWhiIdName','odaPosition', 'odaStorageDate', 'odaRemark'],
            height: 590,
            correctFormat: true,
            minSpareRows: 100,
            hiddenColumns: {
                columns: [0, 1, 2, 3, 4, 5],
                indicators: true
            },
            removeCallBack: removeProcess,
            callBack: process,
            saveButtonId: $("#btn-saveInBill"),
            customChange: function (row, changeName, data) {
                if (changeName === 'odaAvaNum') {
                    var odaWeight = data[10] * data[5];
                    odaWeight =  Math.round(odaWeight*1000)/1000;
                    js.hot._hot.setDataAtRowProp(row, 'odaWeight', odaWeight + '');
                }
            },
            columns: [
                {
                    data: 'odaId',
                    type: 'numeric',
                    width: 40
                },
                {
                    data: 'odaNum',
                    type: 'numeric'
                },
                {
                    data: 'ityId',
                    type: 'numeric'
                },
                {
                    data: 'odaWhiIdName',
                    type: 'text'
                },
                {
                    data: 'odaMatType',
                    type: 'numeric'
                },
                {
                    data: 'oda',
                    type: 'numeric'
                },
                {
                    data: 'odaMatName',//类型
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'odaTexture',//材质
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'odaSpec',//规格
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'odaDrawingCode',//图号
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'odaAvaNum',//数量
                    type: 'numeric'
                },
                {
                    data: 'odaWeight',//重量
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'odaTrackCode',//跟踪号
                    type: 'text',
                    readOnly: true
                },
                // {
                //     data: 'odaOrderNum',//订单号
                //     type: 'text',
                //     readOnly: true
                // },
                {
                    data: 'odaProCode',//项目编号
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'odaProName',//项目名称
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'contractNo',//合同编号
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'odaSupplier',//供应商
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'odaWhiIdName',//库位
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'odaPosition',//存放位置
                    type: 'text',
                    readOnly: true
                },
                {
                    data: 'odaStorageDate',//出库日期
                    type: 'date',
                    dateFormat: 'YYYY/MM/DD',
                    correctFormat: true
                },
                {
                    data: 'odaRemark',//备注
                    type: 'text',
                    readOnly: true
                }
            ]
        });
    });
</script>
</body>
</html>